'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var action = require('../../actions/news.js');
var ReSlider = require('./ReSlider.jsx');
var PhotoChange = require('./PhotoChange.jsx');
var ReProcessBar = require('../../components/pc/ReProcessBar.jsx');
var ReButton = require('../../components/pc/ReButton.jsx');
var HkfsProductItem = require('../../components/pc/HkfsProductItem.jsx');
var HkfsHomeproductTable = require('./HkfsHomeProductTable.jsx');
var HkfsProductDescription = require('../../components/pc/HkfsProductDescription.jsx');

var HkfsHomeToolBar = require('../../components/pc/HkfsHomeToolBar.jsx');
var HkfsHomeToolBarItem = require('../../components/pc/HkfsHomeToolBarItem.jsx');
var RePanel = require('./RePanel.jsx');
var ReLiGroup = require('./ReLiGroup.jsx');
var RePictureLiGroup = require('../../components/pc/RePictureLiGroup.jsx');
var ReImg = require('../../components/pc/ReImg.jsx');
var LazyLoad = require('../../common/LazyLoad.js');
var ReDialog = require('../../components/pc/ReDialog.jsx');
var ReRightBubbleBox = require('./ReRightBubbleBox.jsx');
var HkfsProfitComputer=require('../../components/pc/HkfsProfitComputer.jsx');
var ReNoticeBar=require('../../components/pc/ReNoticeBar.jsx');

var fetchList = action.fetchList;

class HkfsHome extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            showImg1:false,
            showImg2:false,
            showImg3:false
        };
        this.renderSlider = this.renderSlider.bind(this);
        this.renderProductItems = this.renderProductItems.bind(this);
        this.showProfitDialog = this.showProfitDialog.bind(this);
        this.GetHomeShowImg1Class=this.GetHomeShowImg1Class.bind(this);
        this.GetHomeShowImg2Class=this.GetHomeShowImg2Class.bind(this);
        this.GetHomeShowImg3Class=this.GetHomeShowImg3Class.bind(this);
        this.SetImgState=this.SetImgState.bind(this);
        this.GoToTop=this.GoToTop.bind(this);
        this.recommendProductClick=this.recommendProductClick.bind(this);
    }

    GetHomeShowImg1Class(){
        if(this.state.showImg1){
            return 'HomeShowImg HomeShowImg1';
        }
        else{
            return 'HideImg'
        }
    }

    GoToTop(){
        window.scrollTo(0,0);
    }

    //设置状态修改图片显示状态
    SetImgState(item,state){
        setTimeout(()=>{
            var current={};
            current[item]=state;
            this.setState(current);

        },0);
    }

    GetHomeShowImg2Class(){
        if(this.state.showImg2){
            return 'HomeShowImg HomeShowImg2';
        }
        else{
            return 'HideImg'
        }
    }
    GetHomeShowImg3Class(){
        if(this.state.showImg3){
            return 'HomeShowImg HomeShowImg3';
        }
        else{
            return 'HideImg'
        }
    }

    //渲染轮播条
    renderSlider() {
        return this.props.homeSliderItems.map((item, i)=> {
            return <a key={"homeSliderItem"+i} href={item.href}><ReImg realImg={item.imgHref} reClass="mainSlider"  backImg="/images/pc/banner_bg_default.jpg"/></a>
        })
    }



//渲染首页推荐产品
    renderProductItems() {
        return this.props.data.map((item, i)=> {
            return <HkfsProductItem key={"HkfsProductItem"+i} {...item} onItemButtonClick={this.recommendProductClick}></HkfsProductItem>
        });
    }

    //渲染完成后添加异步加载
    componentDidMount() {
        var lazyLoad = new LazyLoad('/build','hkfsMap.bundle.js', 200);
        lazyLoad.addLazy();
    }

    showProfitDialog() {

        ReDialog.showDialog({
            title: <span className="HkfsHomeProfitComputerTitle"><img src="images/pc/toolbar_icon_counter.png"/><span>收益计算器</span></span>,
            isOk: false,
            content: <HkfsProfitComputer/>,
            isMask: true,
            isCancel: false,
            dialogWidth: '700px',
            dialogHeight: '350px',
            result: (result)=> {
            }
        });
    }

    //显示开发中
    showTips(){
        var style={
            padding:'10px 0'
        };
        ReDialog.showDialog({
            title: '提示',
            content: <div><div style={style}><img src="images/pc/developing_small.png"/></div><div>玩命开发中</div></div>,
            isMask: true,
            isCancel: false,
            dialogWidth: '300px',
            dialogHeight: '300px',
            result: (result)=> {
            }
        });
    }

    //推荐产品点击
    recommendProductClick(id) {
        var style={
            padding:'10px 0'
        };
        ReDialog.showDialog({
            title: '提示',
            content: <div><div style={style}><img src="images/pc/developing_small.png"/></div><div>玩命开发中</div></div>,
            isMask: true,
            isCancel: false,
            dialogWidth: '300px',
            dialogHeight: '300px',
            result: (result)=> {
            }
        });
    }

    render() {
        let widthArray = ['25%', '15%', '15%', '15%', '15%', '15%'];
        let itemTitle = ['产品名称', '年化利率', '期限', '可投金额', '进度', '操作'];
        let itemTypes = ['string', 'largeRed', 'string', 'string', 'process', 'button'];
        let specialWidthArray = ['15%', '35%', '20%', '15%', '15%'];
        let specialItemTitle = ['产品代码', '产品名称', '入涨跌幅', '单位净值', '操作'];
        let specialItemTypes = ['string', 'string', 'arrow', 'string', 'button'];
        return (
            <div className="HkfsHome_Container">

                <ReSlider heightAuto="19%" isAutomatic={true} showCount={1} isShowPrevAndNext={true}>
                    {this.renderSlider()}
                </ReSlider>
                <div className="HkfsHomeNotice">
                    <img src="images/pc/content_icon_notice.png"/>
                    <span className="redText">[公告]</span>
                    <ReNoticeBar data={this.props.homeNotice.content} reClass="HomeNoticeBar"/>
                </div>
                <div className="PhotoChangeBar">
                    <div>
                        <div>
                            <PhotoChange href="/products" backImg="/images/pc/content_icon_financial_hover.png"
                                         fontImg="/images/pc/content_icon_financial_normal.png" rippleDelay="0">
                                <HkfsProductDescription>
                                    <div>十年金融</div>
                                    <div>华康集团，数十年综合金融经验</div>
                                </HkfsProductDescription>
                            </PhotoChange>
                        </div>
                    </div>
                    <div>
                        <div>
                            <PhotoChange href="/products" backImg="/images/pc/content_icon_safe_hover.png"
                                         fontImg="/images/pc/content_icon_safe_normal.png" rippleDelay="2.5">
                                <HkfsProductDescription>
                                    <div>资金安全</div>
                                    <div>严格的资金管理流程完善安全技术</div>
                                </HkfsProductDescription>
                            </PhotoChange>
                        </div>
                    </div>
                    <div>
                        <div>
                            <PhotoChange href="/products" backImg="/images/pc/content_icon_earnings_hover.png"
                                         fontImg="/images/pc/content_icon_earnings_normal.png" rippleDelay="5">
                                <HkfsProductDescription>
                                    <div>收益保障</div>
                                    <div>100%投资人获得预期收益</div>
                                </HkfsProductDescription>
                            </PhotoChange>
                        </div>
                    </div>
                    <div>
                        <div>
                            <PhotoChange href="/products" backImg="/images/pc/content_icon_convenience_hover.png"
                                         fontImg="/images/pc/content_icon_convenience_normal.png" rippleDelay="7.5">
                                <HkfsProductDescription>
                                    <div>操作便利</div>
                                    <div>7X24小在线下单，操作便捷</div>
                                </HkfsProductDescription>
                            </PhotoChange>
                        </div>
                    </div>

                </div>
                <div className="ProductItems">
                    <ReSlider showCount={3} isShowPrevAndNext={true}>
                        {this.renderProductItems()}
                    </ReSlider>
                </div>

                <div className="HomeproductTableGroup">
                    <HkfsHomeproductTable buttonText="立即购买" reSrc="/images/pc/content_title_bg_red.png"
                                          description="风险低，收益稳定" type="固定收益"
                                          homeProductDetailData={this.props.homeProductDetailData.homeproductDetail_1}
                                          widthArray={widthArray} itemTitle={itemTitle}
                                          itemTypes={itemTypes}
                                          itemHref="/productDetail?parId={id}"
                                          showTips={this.showTips}
                                          detailHref="/products">

                    </HkfsHomeproductTable>
                    <HkfsHomeproductTable buttonText="立即购买" reSrc="/images/pc/content_title_bg_blue.png"
                                          description="进可攻，退可守" type="浮动收益"
                                          homeProductDetailData={this.props.homeProductDetailData.homeproductDetail_2}
                                          widthArray={widthArray} itemTitle={itemTitle}
                                          itemTypes={itemTypes}
                                          itemHref="/productDetail?parId={id}"
                                          showTips={this.showTips}
                                          detailHref="/products#active1">
                    </HkfsHomeproductTable>
                    <HkfsHomeproductTable buttonText="立即购买" reSrc="/images/pc/content_title_bg_red.png"
                                          description="收益高，有一定的风险"
                                          type="固定+浮动收益"
                                          homeProductDetailData={this.props.homeProductDetailData.homeproductDetail_3}
                                          widthArray={widthArray} itemTitle={itemTitle}
                                          itemTypes={itemTypes}
                                          itemHref="/productDetail?parId={id}"
                                          showTips={this.showTips}
                                          detailHref="/products#active2">
                    </HkfsHomeproductTable>
                    <HkfsHomeproductTable buttonText="立即购买" reSrc="/images/pc/content_title_bg_blue.png"
                                          description="风险低，种类多，流动性好"
                                          type="公募基金"
                                          homeProductDetailData={this.props.homeProductDetailData.homeproductDetail_4}
                                          widthArray={specialWidthArray} itemTitle={specialItemTitle}
                                          itemTypes={specialItemTypes}
                                          itemHref="/fundDetail?fundCode={id}"
                                          showTips={this.showTips}
                                          detailHref="/products#active3">

                    </HkfsHomeproductTable>
                </div>

                <div className="HomePanelGroup">
                    <div className="HomeNews">
                        <RePanel title="财富新闻" titleImage="/images/pc/content_icon_news.png"
                                 moreLink="/about#active2" height="320px">
                            <RePictureLiGroup reData={this.props.homeNewDetail}></RePictureLiGroup>
                        </RePanel>
                    </div>
                    <div className="HomeDynamic">
                        <RePanel title="财富动态" titleImage="/images/pc/content_icon_trends.png"
                                 moreLink="/viewPoint" height="320px">
                            <ReLiGroup reData={this.props.homeDynamicDetail}></ReLiGroup>
                        </RePanel>
                    </div>
                </div>

                <div className="HomeItem">
                    <div className="HomeTitle">
                        <img src="/images/pc/content_icon_fortune.png"/><span>华康财富</span>
                    </div>
                </div>
                <div id="HkfsMap" className="HomeItem">
                </div>

                { /* <div className="HomeItem">
                    <div className="HomeTitle">
                        <img src="/images/pc/content_icon_partner.png"/><span>合作伙伴</span>
                    </div>
                </div>*/}
                <HkfsHomeToolBar>
                    <div barClick={this.showProfitDialog}>
                        <HkfsHomeToolBarItem imgHref="/images/pc/toolbar_calculator.png"
                                             message="收益计算"></HkfsHomeToolBarItem>
                    </div>
                    <div barMouseOver={this.SetImgState.bind(this,'showImg1',true)} barMouseOut={this.SetImgState.bind(this,'showImg1',false)}>
                        <HkfsHomeToolBarItem imgHref="/images/pc/toolbar_app.png" message="app下载"></HkfsHomeToolBarItem>
                    </div>
                    <div barMouseOver={this.SetImgState.bind(this,'showImg3',true)} barMouseOut={this.SetImgState.bind(this,'showImg3',false)}>
                        <HkfsHomeToolBarItem imgHref="/images/pc/toolbar_phone.png"
                                             message="联系我们"></HkfsHomeToolBarItem>
                    </div>
                    <div barMouseOver={this.SetImgState.bind(this,'showImg2',true)} barMouseOut={this.SetImgState.bind(this,'showImg2',false)}>
                        <HkfsHomeToolBarItem imgHref="/images/pc/toolbar_two_code.png"
                                             message="扫码关注"></HkfsHomeToolBarItem>
                    </div>
                    <div barClick={this.GoToTop}>
                        <HkfsHomeToolBarItem imgHref="/images/pc/toolbar_top.png" message="回到顶部"></HkfsHomeToolBarItem>
                    </div>
                </HkfsHomeToolBar>

                <div className="HomeShowImgs">
                    <ReRightBubbleBox reClass={this.GetHomeShowImg1Class()}><img src="/images/pc/footer_download_app.png"/></ReRightBubbleBox>
                    <ReRightBubbleBox reClass={this.GetHomeShowImg2Class()}><img src="/images/pc/footer_ems-cnpl.png"/></ReRightBubbleBox>
                    <ReRightBubbleBox reClass={this.GetHomeShowImg3Class()}>
                        <div>服务热线:</div>
                        <div>400-102-1010</div>
                    </ReRightBubbleBox>
                </div>
                <ReDialog></ReDialog>
            </div>


        );
    }
}


function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.hkfs);
}

module.exports = ReactRedux.connect(mapStateToProps)(HkfsHome);